<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>userlit列表</title>
    <meta name="author" content="小柒2012" />
    <meta name="site" content="https://blog.52itstyle.com" />
    <link rel="stylesheet" th:href="@{/iview/iview.css}">
    <script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
    <script th:src="@{/common.js}" type="text/javascript"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-cloak>
<!-- 计算属性 vs 侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，
你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：
计算属性的 setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
-->
    <div id="demo">{{ fullName }}</div>
    <div id="demo2">{{ fullName2 }}</div>

    <br/><br/>
    <!--我们可以传给 v-bind:class 一个对象，以动态地切换 class： -->
    <div v-bind:style="styleObject"></div>
</div>

<br/><br/>
<div id="app2" v-cloak>
    <div id="watch-example">
        <p>Ask a yes/no question:</p>
        <input v-model="question">
    </div>
    <p>{{ answer }}</p>
</div>



<br/><br/>
<div id="app3" v-cloak>
    <br/><br/>
    <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>

    <!-- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
    Math.random() 这个函数可以直接调用-->
    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>

    <br/><br/>
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        not abc
    </div>


    <br/><br/>
    <!-- key 管理可复用的元素-->
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
    </template>

    <br/><br/>
    <!-- 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
        注意，v-show 不支持 <template> 元素，也不支持 v-else。
        一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
        -->
    <h1 v-show="isok">Hello!</h1>


    <br/><br/>
    <!-- 一个对象的 v-for-->
    <ul id="v-for-object" class="demo">
        <!--方式1 -->
        <li v-for="value in object">
            {{ value }}
        </li>
        <!-- 方式2-->
        <div v-for="(value, key) in object">
            {{ key }}: {{ value }}
        </div>
        <!--方式3 -->
        <div v-for="(value, key, index) in object">
            {{ index }}. {{ key }}: {{ value }}
        </div>
    </ul>

    <!-- 一个list对象的的v-for了，用iview -->
    <br/><br/>
    <p>--------------------</p>
    <!--显示过滤/排序结果 -->
    <div v-for="n in evenNumbers">{{ n }}</div>

</div>
<script>
var vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Foo',
        lastName: 'Bar',
        firstName2:'',
        lastName2:'',
        styleObject: {
            color: 'red',
            fontSize: '13px'
        }
    },
    computed: {
        fullName: function () {
            return this.firstName + ' ' + this.lastName
        },
        fullName2: {
            // getter
            get: function () {
                return this.firstName2 + ' ' + this.lastName2
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName2 = names[0]
                this.lastName2 = names[names.length - 1]
            }
        }
    }

})

    vm.fullName = 'john doe'//fullname的set方法的没有用，没有set方法
    vm.fullName2 = 'john doe'//fullname2的set方法有效，因为定义了set方法
</script>
<script>
    var vm = new Vue({
        el:'#app2',
        data:{
            question: '',
            answer: 'I cannot give you an answer until you ask a question!'
        },
        watch:{
            question:function () {
                this.answer = 'Waiting for ......'
                this.debouncedGetAnswer()
            }
        },
        created:function () {
                // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
                // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
                // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
                // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
                // 请参考：https://lodash.com/docs#debounce getAnswer是我们定义的函数
                this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
        },
        methods:{
            getAnswer:function () {
                if (this.question.indexOf('?') === -1) {
                    this.answer = 'Questions usually contain a question mark. ;-)'
                    return
                }
                this.answer = 'Thinking...'
                var vm = this
                axios.get('https://yesno.wtf/api')
                    .then(function (response) {
                        vm.answer = _.capitalize(response.data.answer)
                    })
                    .catch(function (error) {
                        vm.answer = 'Error! Could not reach the API. ' + error
                    })
            }
        }

    })


</script>
<script>
    var vm = new Vue({
        el:'#app3',
        data:{
            ok:true,//true或者false，字符串的'false'默认是true的
            type:'D',
            loginType:'username',
            isok:true,
            object: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30
            },
            numbers: [ 1, 2, 3, 4, 5 ]
        },
        computed: {
            evenNumbers: function () {
                return this.numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        }
    })



</script>




</body>


</html>